<template>
	<view class="bagItem">
		<view class="top" @click.stop="viewInfo">
			<image mode="aspectFit" class="top-icon" :src="`${STATIC_URL}/bag.png`" />
			<view class="top-text"> 订单信息 </view>
		</view>
		<view class="bd">
			<view class="bd-check">
				<slot></slot>
				<!-- <u-checkbox
          v-model="checked"
          active-color="#CD8544"
          size="32"
          shape="circle"
        ></u-checkbox> -->
			</view>
			<image mode="aspectFill" class="bd-cover" :src="item.image" @click.stop="viewInfo" />
			<view class="bd-info">
				<view class="title" @click.stop="viewInfo"> {{ item.name }} </view>
				<view class="sub" @click.stop="viewInfo">{{ size }}</view>
				<view class="ft">
					<view class="ft-price" @click.stop="viewInfo">
						¥ {{ item.price }}
					</view>
					<view class="ft-oper">
						<!-- <u-number-box></u-number-box> -->
						<!-- <slot name="num"></slot> -->
						<!-- <u-number-box
              slot="num"
              min="1"
              v-model="item.num"
              @plus="numPlus"
              @minus="numPlus"
              :index="item.id"
            ></u-number-box> -->
						<image src="https://xyshop.outletds.com/img/minus.png" class="icon" mode="aspectFit" @click.stop="minus" />
						<view class="num">
							{{ item.num }}
						</view>
						<image src="https://xyshop.outletds.com/img/plus.png" class="icon" mode="aspectFit" @click.stop="plus" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		shoppingCarEdit
	} from "@/utils/api";
	export default {
		props: {
			item: {
				type: Object,
			},
		},
		computed: {
			size() {
				if (this.item.colour) {
					return this.item.colour + "；" + this.item.stock.name;
				} else {
					return "";
				}
			},
		},
		data() {
			return {
				checked: false,
			};
		},
		methods: {
			// 查看详情
			viewInfo() {
				uni.navigateTo({
					url: "/pages/goodsDetails/goodsDetails?id=" + this.item.goods_id,
				});
			},
			numPlus({
				value,
				index
			}) {
				shoppingCarEdit({
					id: index,
					num: value,
				}).then((resp) => {
					console.log("修改商品数量", resp);
					if (resp.code == 0) {}
					return "";
				});
			},
			// 数量添加
			plus() {
				if (this.item.num < this.item.stock.num) {
					shoppingCarEdit({
						id: this.item.id,
						num: Number(this.item.num) + 1,
					}).then((resp) => {
						console.log("修改商品数量", resp);
						if (resp.code == 200) {
							this.$emit("numEdit", {
								id: this.item.id,
								num: Number(this.item.num) + 1,
							});
						}
					});
				} else {
					uni.showToast({
						icon: "none",
						title: "已经是库存最大值，不可添加",
					});
				}
			},
			// 数量减少
			minus() {
				if (Number(this.item.num) == 1) {
					uni.showToast({
						icon: "none",
						title: "数量不能再减少了",
					});
				} else {
					shoppingCarEdit({
						id: this.item.id,
						num: Number(this.item.num) - 1,
					}).then((resp) => {
						console.log("修改商品数量", resp);
						if (resp.code == 200) {
							this.$emit("numEdit", {
								id: this.item.id,
								num: Number(this.item.num) - 1,
							});
						}
					});
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
	.bagItem {
		width: 100%;
		border-radius: 16rpx;
		background-color: #f5f5f5;
		box-sizing: border-box;
		padding: 25rpx 30rpx;
		margin-bottom: 20rpx;

		.top {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 20rpx;

			&-icon {
				width: 25rpx;
				height: 30rpx;
				margin-right: 18rpx;
			}
		}

		.bd {
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-check {
				width: 32rpx;
				// height: 32rpx;
			}

			&-cover {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
				margin: 0 25rpx 0 0;
			}

			&-info {
				width: calc(100% - 232rpx);

				.title {
					font-size: 30rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.sub {
					display: inline-block;
					border-radius: 4rpx;
					color: #aaaaaa;
					font-size: 26rpx;
					background-color: #e8e8e8;
					padding: 2rpx 4rpx;
					margin: 10rpx 0;
				}

				.ft {
					display: flex;
					align-items: center;
					justify-content: space-between;

					&-price {
						font-size: 30rpx;
						font-weight: bold;
					}

					&-oper {
						display: flex;
						align-items: center;

						.icon {
							width: 28rpx;
							height: 28rpx;
						}

						.num {
							// padding: 0 15rpx;
							min-width: 90rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>
